<template>
	<div id="magicalDragScene" class="mc-root" before-create="beforeCreate" created="created" before-mount="beforeMount"
       mounted="mounted" mcstyle="ab-unit-top:px">
    <mc-new-vxe-table ref="xTable" @after-table-mounted="ttt" id="tvcb088f1d3ec73fa971156ac8ad22fe7" :mc-dialog-footer-btn="false" :data.sync="tableList" mc-version="v2" :auto-resize="true" height="600" :mc-page-size="10" mc-query-url="magical_lowcode/openapi/crud/mytable1717466055474/page" mc-save-url="magical_lowcode/openapi/crud/mytable1717466055474/save" mc-delete-url="magical_lowcode/openapi/crud/mytable1717466055474/delete-by-pk" mc-query-method="post" :mc-open-pane="{'type':'dialog','width':'30%','modal':true,'closeOnClickModal':true,'height':'55%'}" mc-update-url="magical_lowcode/openapi/crud/mytable1717466055474/update" mc-export-url="magical_lowcode/openapi/crud/mytable1717466055474/export-excel" mc-layout="tb" :mc-array-fields="[]">
      <template #query-left="scope"></template>
      <template #query="scope">
        <el-card>
          <el-form mc-table-comment="mytable1717466055474" mcstyle="ab-unit-top:px;ab-unit-height:px" label-width="100px" size="small" :inline="true">
            <el-form-item label="图纸字段名">
              <mc-input v-model="scope.row.ocrTitle" mc-java-type="String" mc-db-name="ocr_title"></mc-input>
            </el-form-item>
            <el-form-item label="字段描述">
              <mc-input v-model="scope.row.ocrDescrible" mc-java-type="String" mc-db-name="ocr_describle"></mc-input>
            </el-form-item>
          </el-form>
        </el-card>
      </template>
      <template #operate="scope">
        <el-col :span="24">
          <vxe-toolbar class="mc-on-shade" custom print>
            <template #buttons>
              <el-col :span="24">
                <el-button @click="scope.vue.queryTable" size="small">查询</el-button>
                <el-button @click="scope.vue.resetQueryData" size="small">重置</el-button>
                <el-button @click="scope.vue.insertData({form:{}})" size="small" type="primary">新增</el-button>
                <el-button @click="scope.vue.dbSave({data:{},confirm:true,callback:function(data){scope.vue.apiAddRow({data:{id:data.res.data}})}})" size="small" type="primary">添加行</el-button>
                <el-button @click="scope.vue.printTable('all')" size="small" type="primary">打印全部</el-button>
                <el-button @click="scope.vue.printTable('checked')" size="small" type="primary">打印勾选</el-button>
                <el-button @click="scope.vue.exportExcel('page')" size="small" type="primary">导出当前页Excel</el-button>
                <el-button @click="scope.vue.exportExcel('all')" size="small" type="primary">导出Excel</el-button>
                <mc-image-upload name="file" style="display: inline-block" :mc-show-upload-icon="false" :show-file-list="false" action="magical_lowcode/openapi/crud/mytable1717466055474/import-excel">
                  <el-button size="small" type="warning">上传Excel</el-button>
                </mc-image-upload>
                <el-button @click="scope.vue.exportTable('all')" size="small" type="primary">导出CSV</el-button>
                <el-button @click="scope.vue.exportTable('checked')" size="small" type="primary">导出勾选CSV</el-button>
              </el-col>
            </template>
          </vxe-toolbar>
        </el-col>
      </template>
      <mc-new-vxe-table-column title="id" field="id" :mc-col-config="{'type':'user'}" :mc-sortable="true" :visible="false">
        <template #row="scope">
          <div class="mc-div-pane">
            <mc-input v-model="scope.row.id" mc-java-type="Integer" mc-db-name="id" mc-pk-type="UUID" disabled="disabled" size="mini" @change="scope.vue.dbUpdate({confirm:true,data:{id:scope.row.id,id:scope.row.id},callback:function(res){scope.vue.reload({current:true})}})"></mc-input>
          </div>
        </template>
      </mc-new-vxe-table-column>
      <mc-new-vxe-table-column title="物料号" field="ref" :mc-col-config="{'type':'user'}" :mc-sortable="true" :visible="false">
        <template #row="scope">
          <div class="mc-div-pane">
            <mc-input v-model="scope.row.ref" mc-java-type="String" mc-db-name="ref" size="mini" @change="scope.vue.dbUpdate({confirm:true,data:{id:scope.row.id,ref:scope.row.ref},callback:function(res){scope.vue.reload({current:true})}})"></mc-input>
          </div>
        </template>
      </mc-new-vxe-table-column>
      <mc-new-vxe-table-column title="物料描述" field="refName" :mc-col-config="{'type':'user'}" :mc-sortable="true" :visible="false">
        <template #row="scope">
          <div class="mc-div-pane">
            <mc-input v-model="scope.row.refName" mc-java-type="String" mc-db-name="ref_name" size="mini" @change="scope.vue.dbUpdate({confirm:true,data:{id:scope.row.id,refName:scope.row.refName},callback:function(res){scope.vue.reload({current:true})}})"></mc-input>
          </div>
        </template>
      </mc-new-vxe-table-column>
      <mc-new-vxe-table-column title="图纸字段名" field="ocrTitle" :mc-col-config="{'type':'user'}" :mc-sortable="true">
        <template #row="scope">
          <div class="mc-div-pane">
            <mc-input v-model="scope.row.ocrTitle" mc-java-type="String" mc-db-name="ocr_title" size="mini" @change="scope.vue.dbUpdate({confirm:true,data:{id:scope.row.id,ocrTitle:scope.row.ocrTitle},callback:function(res){scope.vue.reload({current:true})}})"></mc-input>
          </div>
        </template>
      </mc-new-vxe-table-column>
      <mc-new-vxe-table-column title="字段描述" field="ocrDescrible" :mc-col-config="{'type':'user'}" :mc-sortable="true">
        <template #row="scope">
          <div class="mc-div-pane">
            <mc-remote-select v-model="scope.row.ocrDescrible" :mc-config-tmp="{'stage':'db','apiUuid':'','tableUuid':''}" :mc-config="{'type':'kv','options':[{'k':'ref','v':'子物料号'},{'k':'ref_name','v':'子物料名称'},{'k':'ingredient','v':'材质'},{'k':'qty','v':'数量'},{'k':'unit','v':'单位'},{'k':'property','v':'属性'},{'k':'remark','v':'备注'}],'api':{'method':'post','url':'','params':[],'fields':[],'limit':100,'orders':[]}}" size="small" @mc-change="updateFields($event,scope.row)">
              <template #option="scope">
							<span class="mc-span-pane" style="width:100%">
								<mc-text>{{scope.label}}</mc-text>
							</span>
              </template>
            </mc-remote-select>
          </div>
        </template>
      </mc-new-vxe-table-column>
      <mc-new-vxe-table-column title="创建人" field="createBy" :mc-col-config="{'type':'user'}" :mc-sortable="true">
        <template #row="scope">
          <div class="mc-div-pane">
            <mc-input v-model="scope.row.createBy" mc-java-type="String" mc-db-name="create_by" size="mini" @change="scope.vue.dbUpdate({confirm:true,data:{id:scope.row.id,createBy:scope.row.createBy},callback:function(res){scope.vue.reload({current:true})}})"></mc-input>
          </div>
        </template>
      </mc-new-vxe-table-column>
      <mc-new-vxe-table-column title="创建时间" field="createTime" :mc-col-config="{'type':'user'}" :mc-sortable="true">
        <template #row="scope">
          <div class="mc-div-pane">
            <mc-date-picker v-model="scope.row.createTime" mc-java-type="Date" mc-db-name="create_time" type="datetime" size="mini" @change="scope.vue.dbUpdate({confirm:true,data:{id:scope.row.id,createTime:scope.row.createTime},callback:function(res){scope.vue.reload({current:true})}})"></mc-date-picker>
          </div>
        </template>
      </mc-new-vxe-table-column>
      <mc-new-vxe-table-column title="备注" field="remark" :mc-col-config="{'type':'user'}" :mc-sortable="true" :visible="false">
        <template #row="scope">
          <div class="mc-div-pane">
            <mc-input v-model="scope.row.remark" mc-java-type="String" mc-db-name="remark" size="mini" @change="scope.vue.dbUpdate({confirm:true,data:{id:scope.row.id,remark:scope.row.remark},callback:function(res){scope.vue.reload({current:true})}})"></mc-input>
          </div>
        </template>
      </mc-new-vxe-table-column>
      <mc-new-vxe-table-column title="操作" :mc-tmp-data="{'stage':'db','apiUuid':'','tableUuid':''}" :mc-col-config="{'type':'user','options':[],'api':{'method':'post','url':'','params':[],'fields':[]}}">
        <template #row="scope">
          <div class="mc-div-pane">
            <el-button type="text" icon="fa fa-edit" @click="scope.vue.editEvent(scope.row)">编辑</el-button>
            <el-button type="text" icon="fa fa-trash-o" @click="scope.vue.removeEvent(scope.row,scope.rowIndex)">删除</el-button>
          </div>
        </template>
      </mc-new-vxe-table-column>
      <template #form="scope">
        <el-form class="mc-vxe-table-form" mcstyle="ab-unit-top:px;ab-unit-height:px" label-width="100px" size="small" :model="scope.row">
          <el-form-item label="图纸字段名">
            <mc-input style="width: 50%;" v-model="scope.row.ocrTitle" mc-java-type="String" mc-db-name="ocr_title"></mc-input>
          </el-form-item>
          <el-form-item label="字段描述">
            <mc-remote-select style="width: 50%;" v-model="scope.row.ocrDescrible" :mc-config-tmp="{'stage':'db','apiUuid':'','tableUuid':''}" :mc-config="{'type':'kv','options':[{'k':'ref','v':'子物料号'},{'k':'ref_name','v':'子物料名称'},{'k':'ingredient','v':'材质'},{'k':'qty','v':'数量'},{'k':'unit','v':'单位'},{'k':'property','v':'属性'},{'k':'remark','v':'备注'}],'api':{'method':'post','url':'','params':[],'fields':[],'limit':100,'orders':[]}}" size="small">
              <template #option="scope">
							<span class="mc-span-pane" style="width:100%">
								<mc-text>{{scope.label}}</mc-text>
							</span>
              </template>
            </mc-remote-select>
          </el-form-item>
          <el-form-item label="备注">
            <mc-input style="width: 50%;" v-model="scope.row.remark" mc-java-type="String" mc-db-name="remark"></mc-input>
          </el-form-item>
          <el-form-item label="创建人">
            <mc-input style="width: 50%;" v-model="scope.row.createBy" mc-java-type="String" mc-db-name="create_by"></mc-input>
          </el-form-item>
          <el-form-item label="创建时间">
            <mc-date-picker v-model="scope.row.createTime" mc-java-type="Date" mc-db-name="create_time" type="datetime"></mc-date-picker>
          </el-form-item>
        </el-form>
      </template>
      <template #dialog-footer="scope">
			<span class="mc-span-pane">
				<el-button size="small" @click="scope.vue.closeDialog">取消</el-button>
				<el-button size="small" type="primary" @click="scope.vue.submitForm()" :icon="scope.loading.save?'el-icon-loading':''" :disabled="scope.loading.save">确定</el-button>
			</span>
      </template>
      <template #parent="scope"></template>
    </mc-new-vxe-table>

    <el-button @click="submit">提交</el-button>
    <el-button @click="setDeleteData">修改删除数据</el-button>

	</div>

</template>

<script>
  import Sortable from 'sortablejs';

  import McNewVxeTable from './components/McNewVxeTable'
import McNewVxeTableColumn from './components/McNewVxeTableColumn'
import McRemoteSelect from './components/McRemoteSelect'
import McKindeditor from './components/McKindeditor'
import McParentChildSelect from './components/McParentChildSelect'
import McParentChildGrandsonSelect from './components/McParentChildGrandsonSelect'
import McImageUpload from './components/McImageUpload'
import McInput from "./components/McInput"
import McDatePicker from "./components/McDatePicker"
import McSwitch from "./components/McSwitch"
import McElTabs from "./components/McElTabs"
import McSelect from "./components/McSelect"
import McCommon from "./components/McCommon"
export default {
    data(){
        return {
          tableList: [], /*别删我*/
          uuidve62e7eb9_8a37_6cf_80ec_cbc2b288d9fe: "first", /*别删我*/
          crmClientList: [], /*别删我*/
          contactList: []
        }
    },
    components:{
        McNewVxeTable,
        McNewVxeTableColumn,
        McRemoteSelect,
        McParentChildSelect,
        McParentChildGrandsonSelect,
        McKindeditor,
        McInput,
        McDatePicker,
      McElTabs,
      McSwitch,
      McImageUpload,
      McSelect
    },
    mounted(){
      var _t= this;
      var that= this;
//      var _elDom = _t.$refs.vxeTable.$el;
//      const el = _elDom.querySelectorAll('.body--wrapper>.vxe-table--body tbody')[0]
      /*this.sortable = new Sortable(el, {
        // Class name for the drop placeholder,// 抓取的元素的类名，简单来说就是抓取元素的时候给他加一个类名blue-background-class
        ghostClass: 'blue-background-class',
        group: {name:"pane",pull:'clone'},
        setData: function (/!** DataTransfer *!/dataTransfer, /!** HTMLElement*!/dragEl) {
          // console.log('dataTransfer', dataTransfer)
//          dataTransfer.setData('Text', '')
          dataTransfer.setData('Text', dragEl.textContent);
        },
        onEnd: evt => {
          that.dataList.splice(evt.newIndex, 0, that.dataList.splice(evt.oldIndex, 1)[0]);
          var newArray = that.dataList.slice(0);
          that.dataList = [];
          that.$nextTick(function () {
            that.dataList = newArray;
            console.log(that.dataList)
          });

//                _t.$nextTick(()=>{
//                  var deleteRow = McCommon.util.deleteRow(_t.dataList,evt.oldIndex);
//                  McCommon.util.addRow(_t.dataList,deleteRow,evt.newIndex)
//                })
//          _t.$nextTick(()=>{


//          })
//                var deleteRow = McCommon.util.deleteRow(_t.tableData,evt.oldIndex);
//                McCommon.util.addRow(_t.tableData,deleteRow,evt.newIndex)
//                const targetRow = _t.tableData.splice(evt.oldIndex, 1)[0]
//                _t.tableData.splice(evt.newIndex, 0, targetRow)
        }
      })*/
      setTimeout(function () {
        //_t.$refs.table.clickRow({rowIndex:1})
      },3000)
    },
    methods : {
      ttt(p){
        console.log(p)
      },
      tabClick:function(tab){//标签页点击记住位置
        if(typeof iframeUi!= "undefined"){//发生在布局器内
          var vnodeData = tab.$parent._self.$vnode.data;
          if(vnodeData["model"]){//v-model藏得太深了
            iframeUi.vueApi().setVueData(vnodeData.model.expression,"\""+tab.name+"\"");
          }
        }
        //解决内部如果放echarts则需要初始化一下
        setTimeout(function(){new IframeComponents().execute({action:"resize"});},200)
      },
      drag(item){
        console.log(item)
      },
      drop(item){
        console.log(item)
      },
      changeCheckbox(p){
        console.log(p)
      },
		testApi(){
				var table = this.$refs['stockDetailTable'];
				table.apiSetData({data:[],delete:'empty',code:0,count:0})

		},
		setDeleteData(){
		  var tableData = this.$refs['table'].getData()
//      var deleteRow = McCommon.util.deleteRow(tableData,0);
//      McCommon.util.addRow(tableData,deleteRow,1)
      console.log(tableData);
		},
      tableChange(param){
        console.log(param)
      },
      gai(){
          this.form.tableData.push({name:"dd"})
      },
      focusme(e){
          console.log('focus')
      },
      submit(){
		//console.log(this.deleteData);
        console.log(this.form)
        console.log(this.sync)
        const $table = this.$refs.xTable
        $table.validate({full:true,callback(data){console.log(data)}})
        // var data = this.$refs.table.getData();
        // console.log(data)
      },
      first(p){
        // p.vue.$set(p.query,"name","b")
        //p.query.name="b"
      },
        /*提交前回调*/
        beforeSubmitForm:function(data){
            // console.log(data)
            // var parentId = data.form.parentId;
            // if(parentId){
            //   data.form.parentId = JSON.stringify(parentId);
            // }
            return true;
        },
        focus:function(){
        },
        changeParentQuery(){
            this.parentQuery.pid = new Date().getTime()
            console.log(this.parentQuery)
        },
        alert(scope){
            scope.action=2;
        },
        beforeRender(data){
            // if(data.res.data){
            //   for(var i=0;i<data.res.data.length;i++){
            //     var item = data.res.data[i];
            //     var parentId = item.parentId;
            //     if(!parentId){
            //       item.parentId=[]
            //     }else{
            //       item.parentId = JSON.parse(parentId);
            //     }
            //   }

            // }
            console.log(data.res)
        }
    }
}
</script>

<style>
  vxe-cell c--ellipsis span{
    coler:unset !important;
  }
</style>
